import React from "react";
import { Layout, Dropdown, Avatar } from "antd";
import { useNavigate } from "react-router";
import { connect } from "react-redux";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from "@ant-design/icons";
const { Header } = Layout;
const mapStateToProps = ({ CollapsedReducer: { isCollapsed } }) => {
  return {
    isCollapsed,
  };
};
const mapDispatchToProps = {
  changeCollapsed() {
    return {
      type: "change_collapesd",
    };
  },
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(function TopHeader(props) {
  let navigate = useNavigate();
  const changeCollapsed = () => {
    // setCollapsed(!collapsed);
    // console.log(props);
    props.changeCollapsed();
  };
  const {
    role: { roleName },
    username,
  } = JSON.parse(localStorage.getItem("token"));
  const items = [
    {
      key: "1",
      label: <span>{roleName}</span>,
    },
    {
      key: "4",
      danger: true,
      label: "exit",
      onClick: () => {
        localStorage.removeItem("token");
        navigate("/login");
      },
    },
  ];
  return (
    <Header
      style={{
        padding: "0 16px",
        background: "#fff",
      }}
    >
      {/* {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
        className: "trigger",
        onClick: () => setCollapsed(!collapsed),
      })} */}
      {props.isCollapsed ? (
        <MenuUnfoldOutlined onClick={changeCollapsed} />
      ) : (
        <MenuFoldOutlined onClick={changeCollapsed} />
      )}

      {
        <div style={{ float: "right" }}>
          欢迎回来{username}！
          <Dropdown menu={{ items }}>
            <Avatar size="large" icon={<UserOutlined />} />
          </Dropdown>
        </div>
      }
    </Header>
  );
});
